<!DOCTYPE html>
<html>
<head>
    <title>Electromagnet Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="electromagnetCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('electromagnetCanvas');
        const ctx = canvas.getContext('2d');
        
        // --- Style and Parameter Setup ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        
        const cx = 260;
        const cy = 220;
        const r_outer = 130;
        const r_inner = 80;
        const gap_angle = 0.5; // Gap size in radians
        const start_angle = gap_angle / 2;
        const end_angle = 2 * Math.PI - gap_angle / 2;

        // --- Helper functions for drawing arrows ---
        function drawArrow(x1, y1, x2, y2) {
            const headlen = 10; // length of head in pixels
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        function drawDoubleArrow(x1, y1, x2, y2) {
            drawArrow(x1, y1, x2, y2);
            drawArrow(x2, y2, x1, y1);
        }

        // --- Draw the C-shaped Toroidal Core ---
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer, start_angle, end_angle);
        const p1_x = cx + r_inner * Math.cos(end_angle);
        const p1_y = cy + r_inner * Math.sin(end_angle);
        ctx.lineTo(p1_x, p1_y);
        ctx.arc(cx, cy, r_inner, end_angle, start_angle, true);
        ctx.closePath(); // Closes the path by drawing a line to the start point
        ctx.stroke();

        // --- Draw the Coil ---
        const coil_start_angle = Math.PI - 0.5;
        const coil_end_angle = Math.PI + 0.5;
        
        // Coil block outline
        ctx.beginPath();
        ctx.arc(cx, cy, r_outer + 4, coil_start_angle, coil_end_angle, false);
        const p2_x = cx + (r_inner - 4) * Math.cos(coil_end_angle);
        const p2_y = cy + (r_inner - 4) * Math.sin(coil_end_angle);
        ctx.lineTo(p2_x, p2_y);
        ctx.arc(cx, cy, r_inner - 4, coil_end_angle, coil_start_angle, true);
        ctx.closePath();
        ctx.stroke();

        // Winding marks on the inner side
        const num_windings = 12;
        for (let i = 0; i <= num_windings; i++) {
            const angle = coil_start_angle + (i / num_windings) * (coil_end_angle - coil_start_angle);
            const x = cx + r_inner * Math.cos(angle);
            const y = cy + r_inner * Math.sin(angle);
            ctx.beginPath();
            ctx.arc(x, y, 2, 0, 2 * Math.PI);
            ctx.fill();
        }

        // --- Draw the Voltage Source and Wires ---
        const wire_start_x = cx + Math.cos(coil_start_angle) * (r_outer + 4);
        const wire_y1 = cy + Math.sin(coil_start_angle) * (r_outer + 4);
        const wire_y2 = cy + Math.sin(coil_end_angle) * (r_outer + 4);
        
        const v_box_x = 80;
        const v_box_y = cy;
        const v_box_w = 40;
        const v_box_h = 50;
        
        ctx.beginPath();
        ctx.moveTo(wire_start_x, wire_y1);
        ctx.lineTo(v_box_x + v_box_w, v_box_y - v_box_h / 2);
        ctx.moveTo(wire_start_x, wire_y2);
        ctx.lineTo(v_box_x + v_box_w, v_box_y + v_box_h / 2);
        ctx.stroke();
        
        ctx.strokeRect(v_box_x, v_box_y - v_box_h / 2, v_box_w, v_box_h);
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('V', v_box_x + v_box_w / 2, v_box_y);

        // --- Draw Dimension Labels ---
        // Label 'b'
        ctx.beginPath();
        drawArrow(cx, cy, cx, cy - r_outer);
        ctx.fillText('b', cx + 20, cy - r_outer / 2);

        // Label 'a'
        ctx.beginPath();
        drawDoubleArrow(cx, cy + r_inner, cx, cy + r_outer);
        ctx.fillText('a', cx - 20, cy + (r_inner + r_outer) / 2);

        // Label 'W'
        const w_arrow_x = cx + r_outer + 25;
        const w_arrow_y1 = cy - (r_outer - r_inner) / 2;
        const w_arrow_y2 = cy + (r_outer - r_inner) / 2;
        ctx.beginPath();
        ctx.moveTo(w_arrow_x, w_arrow_y1);
        ctx.lineTo(w_arrow_x, w_arrow_y2);
        ctx.moveTo(w_arrow_x - 5, w_arrow_y1);
        ctx.lineTo(w_arrow_x + 5, w_arrow_y1);
        ctx.moveTo(w_arrow_x - 5, w_arrow_y2);
        ctx.lineTo(w_arrow_x + 5, w_arrow_y2);
        ctx.stroke();
        ctx.fillText('W', w_arrow_x + 20, cy);

        // --- Draw Figure Caption ---
        ctx.font = 'bold 20px "Times New Roman"';
        ctx.fillText('Fig. 2.34', cx, cy + r_outer + 40);
        
    </script>
</body>
</html>